<template>
	<el-scrollbar>
		<div class="title">查询项目信息</div>
		<el-card>
			<el-form ref="queryRef" :model="searchParam" label-position="top" @keyup.enter="getProjectInfo" @input="onInput">
				<el-row :gutter="20">
					<el-col :sm="24" :md="24" :lg="24" :xl="24" :xs="24">
						<el-form-item label="项目编码：" prop="projectCode">
							<el-input v-model="searchParam.projectCode" placeholder="请输入项目编码" />
							<span v-show="showError" class="error-text">项目编码不能为空</span>
						</el-form-item>
					</el-col>
					<el-col :sm="24" :md="24" :lg="24" :xl="24" :xs="24" class="search-button">
						<el-form-item class="w-100%">
							<el-button @click="resetForm">重置</el-button>
							<el-button type="primary" @click="getProjectInfo">查询</el-button>
							<el-button type="danger" :disabled="!projectInfo?.id" @click="changeHandler">确认环节</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-divider class="project-line"> 项目信息 </el-divider>
			<div v-loading="loading" element-loading-text="正在加载数据">
				<div v-if="projectInfo?.id">
					<el-row :gutter="20">
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24" class="project-item">
							<span class="project-label">项目编号：</span>
							<span class="project-content">{{ projectInfo.id }}</span>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目名称：</div>
							<div class="project-content">{{ projectInfo.projectName }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目编码：</div>
							<div class="project-content">{{ projectInfo.projectCode }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目建设内容：</div>
							<div class="project-content">{{ projectInfo.constructionContent }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目计划总投资(万元)：</div>
							<div class="project-content">{{ projectInfo.plannedInvestment }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目投资方名称：</div>
							<div class="project-content">{{ projectInfo.investorName }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目联系人：</div>
							<div class="project-content">{{ projectInfo.contactName ?? '--' }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">项目联系人电话：</div>
							<div class="project-content">{{ projectInfo.contactPhone ?? '--' }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">开始时间：</div>
							<div class="project-content">{{ formatDate(projectInfo?.startTime) }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">结束时间：</div>
							<div class="project-content">{{ formatDate(projectInfo?.endTime) }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">当前状态停留时间：</div>
							<div class="project-content">{{ projectInfo.statusDuration ?? '--' }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">创建人：</div>
							<div class="project-content">{{ projectInfo.creatorName ?? '--' }}</div>
						</el-col>
						<el-divider class="item-divider" />
						<el-col :sm="24" :md="24" :lg="12" :xl="12" :xs="24">
							<div class="project-label">备注：</div>
							<div class="project-content">{{ projectInfo.remark ?? '--' }}</div>
						</el-col>
					</el-row>
				</div>
				<div v-else>
					<el-empty description="暂无数据" />
				</div>
			</div>
		</el-card>
	</el-scrollbar>
	<change-status ref="changeStatusRef" :project-id="projectInfo.id" />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getInfoByCode } from '@/api/project/info'
import { ElForm } from 'element-plus'
import { formatDate } from '@/utils/dateFormat'
import ChangeStatus from '@/views/search/change-status.vue'

interface SearchParam {
	projectCode: string
}

const queryRef = ref<InstanceType<typeof ElForm>>()
const showError = ref(false)
const loading = ref(false)

const searchParam: SearchParam = reactive({
	projectCode: '202407ALFDQW34'
})

const projectInfo = ref<ProjectInfo>({})
const changeStatusRef = ref<InstanceType<typeof ChangeStatus>>()

const resetForm = () => {
	queryRef.value?.resetFields()
	projectInfo.value = {}
}

const onInput = () => {
	showError.value = false
}

const getProjectInfo = async () => {
	if (searchParam.projectCode) {
		loading.value = true
		getInfoByCode(searchParam.projectCode)
			.then(res => {
				// @ts-ignore
				if (res.code === 0) {
					projectInfo.value = res.data
				}
			})
			.finally(() => {
				loading.value = false
			})
	} else {
		showError.value = true
	}
}

const changeHandler = () => {
	changeStatusRef.value?.open()
}
</script>

<style scoped lang="scss">
.title {
	width: 100%;
	text-align: center;
	margin: 10px 0;
	font-size: 20px;
	font-weight: bold;
}

.search-button {
	display: flex;
	justify-content: left;
}
.error-text {
	color: red;
	font-size: 14px;
	margin-left: 5px;
}

.cell-item {
	display: flex;
	justify-items: left;
	align-items: center;
}

.project-line {
	margin: 25px 0;
}

.project-item {
	margin-bottom: 10px;
	font-size: 20px;
}

.item-divider {
	margin: 10px 0;
}

.project-label {
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	margin-bottom: 8px;
}

.project-content {
	font-size: 16px;
}
</style>
